<!-- 我的团队 -->
<template>
	<view class="page_box team-wrap">
		<u-navbar :isFixed="false" title="子账号管理" :borderBottom="false" back-icon-color="#333"
			:background="{backgroundColor:'#fff'}">
			<template v-slot:right>
				<view class="nav-right" @tap="jump('/pages/dianpu_admin/add_account')">
					<text>添加</text>
				</view>
			</template>
		</u-navbar>
		<view class="team-data-box">
			<u-search placeholder="请输入ID/昵称/手机号" v-model="keyword" @search="searchUser" @custom="searchUser"
				@clear="clearSearch"></u-search>
			<view class="data-card" style="margin-top: 30rpx;">
				<view class="total-item">
					<view class="item-title">
						<view>{{ title }} : {{ total || 0 }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="content_box">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
				<!-- 团队列表 -->
				<view class="team-box">
					<view class="team-list" v-for="(index,item) in teamList" :key="index">
						<view class="sh-collapse-box">
							<view class="collapse-head u-flex u-row-between">
								<view class="u-flex member-info">
									<image class="head-img"
										src="https://thirdwx.qlogo.cn/mmopen/vi_32/zk8hm5FmiciaPUYLC0cia79x33rczaeq7Sr2SujY8sWfYM2p5Hictpz6wXItL0DDia69ruOSh7sux4OLcJjEHlS4JUQ/132">
									</image>
									<view class="head-info">
										<view class="name-box u-flex">
											<view class="name-left">
												<view class="name-text">妙手生花18977893289</view>
												<view class="grade-tag tag-box u-flex">
													<text class="tag-title">粉丝</text>
												</view>
											</view>
											<view class="name-id">
												ID:3081866
											</view>
										</view>
										<view class="u-flex">
											<view class="head-time">2022-06-14 19:49:21</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="end-btn">
							<view>
								<u-button
									class="u-btn u-line-1 u-fix-ios-appearance u-size-mini u-hairline-border u-btn--default">
									删除</u-button>
							</view>
						</view>
					</view>
				</view>
				<!-- 缺省页 -->
				<shopro-empty v-show="isEmpty" marginTop="50rpx" :image="$IMG_URL + '/imgs/empty/no_team.png'"
					tipText="暂无团队人员"></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-if="teamList.length" height="80rpx" :status="loadStatus" icon-type="flower"
					color="#ccc" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				backTextStyle: {
					color: '#fff',
					fontSize: '40rpx',
					fontWeight: '500'
				},
				isEmpty: true,

				referrerInfo: {},
				teamList: [], //团队列表
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				total: 0,
				// 二级
				childrenTeamList: [],
				childrenCurrentPage: 1,
				childrenLastPage: 1,
				childrenLoad: false,
				isRefresh: false,
				typeNameMap: {
					all: '全部成员',
					direct: '直推成员',
					other: '其它成员',
					general: '普通会员',
					level2: '体验店',
					level3: '区级代理',
					level4: '县级代理',
					level5: '市级代理',
					level6: '省级代理',
					today: '今日新增',
					yesterday: '昨日新增',
					week: '本周注册',
					month: '本月注册',
					ulto: '上月注册'
				},
				keyword: ''
			};
		},
		computed: {
			...mapState({
				userInfo: ({
					user
				}) => user.userInfo,
				agentInfo: ({
					user
				}) => user.agentInfo
			})
		},
		onLoad() {
			const params = this.$Route.query;
			this.type = params.type || 'all';
			this.pid = params.pid || this.userInfo.id
			this.title = this.typeNameMap[this.type];
			// this.getList();
		},
		methods: {
			...mapActions(['getAgent']),
			// 点击队员项
			onTeamList(param) {
				this.jump('/pages/app/agent/child-list', {
					pid: id
				});
			},
			onAgentView(id) {
				this.jump('/pages/app/agent/view', {
					id: id
				});
			},
			childTypeClick(param) {
				this.jump('/pages/app/agent/team-list', {
					type: param.type,
					pid: param.id
				})
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},

			async getList(search = '') {
				uni.showLoading()
				this.loadStatus = 'loadmore';
				const res = await this.$http('agent.teamList', {
					page: this.currentPage,
					type: this.type,
					pid: this.pid,
				});
				uni.hideLoading()
				if (res.code !== 0) {
					const data = res.data;
					this.total = data.total;
					if (data.total) this.teamList = this.teamList.concat(data.list);
					this.lastPage = Math.ceil(data.total / 10);
					this.loadStatus = this.currentPage < this.lastPage ? 'loadmore' : 'nomore';
				}
			},
			async searchUser(value) {
				if (!value) {
					this.$u.toast('请输入搜索内容');
					return;
				}
				uni.showLoading()
				const res = await this.$http('agent.searchNext', {
					type: this.type,
					search: value
				});
				uni.hideLoading()
				if (res.code !== 0) {
					if (!this.title.includes('搜索结果')) this.title += '搜索结果';
					this.total = res.data.length;
					this.teamList = res.data;
					this.loadStatus = 'nomore';
				}
			},
			async clearSearch() {
				this.title = this.title.replace('搜索结果', '')
				this.teamList = [];
				this.getList()
			},

			// 二级加载更多
			childrenLoadMore(id) {
				if (!this.isRefresh) {
					// 加载更多
					if (this.childrenCurrentPage < this.childrenLastPage) {
						this.isRefresh = true;
						this.childrenCurrentPage += 1;
						this.getChildrenTeam(id);
					}
				}
			},

			// 加载更多
			loadMore() {
				if (this.loadStatus !== 'nomore') {
					this.currentPage += 1;
					this.getList();
				}
			},
			
		}
	};
</script>

<style lang="scss">
	.nav-right {
		padding-right: 20rpx;
		color: #2dae9c;
	}

	.end-btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;

		.u-btn {
			flex-shrink: 0;
			margin: 0 20rpx;
			flex: 0;
		}
	}

	// 推荐人
	.referrer-box {
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
		margin-top: 10rpx;
	}

	// 二级加载更多按钮
	.refresh-btn {
		width: 100%;
		line-height: 100rpx;
		background: #ffffff;
		border-radius: 25rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
		white-space: nowrap;

		.cuIcon-refresh {
			color: #dbdbdb;
			margin-right: 12rpx;
			font-size: 32rpx;
		}
	}

	.refresh-active {
		transform: rotate(360deg);
		transition: all linear 0.5s;
	}

	// 头部卡片
	.head_box {
		background: url($IMG_URL+'/imgs/commission/card_bg.png') no-repeat;
		background-size: 100% 100%;
		padding-bottom: 30rpx;
	}

	//数据展示BOX
	.data-num-box {
		margin: 30rpx 20rpx 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx;

		.num-item {
			width: 100%;
			margin: 20rpx 10rpx;

			.item-title {
				font-size: 22rpx;
				font-weight: 500;
				color: #999999;
				line-height: 30rpx;
				margin-bottom: 10rpx;
			}

			.total-num {
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	// 团队信息总览
	.team-data-box {
		padding: 30rpx;
		background: #ffffff;
		border-bottom: 10rpx solid #eee;

		.data-card {
			.referrer-avatar {
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
			}

			.item-title {
				font-size: 22rpx;
				font-weight: 500;
				color: #999999;
				line-height: 30rpx;
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;
			}

			.total-item {}

			.total-num {
				font-size: 24rpx;
				font-weight: 500;
				color: #999;
				margin-top: 20rpx;
			}

			.category-num {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	// 团队列表
	.team-box {
		.team-list {
			background: #fff;
			border-bottom: 5px solid #eee;

			.sh-collapse-box {
				background-color: #fff;

				.collapse-head {
					padding: 0px 14px;
					height: 66px;
					border-bottom: 1px solid #eee;

					.member-info {
						width: 100%;
					}

					.head-img {
						width: 33px;
						height: 33px;
						border-radius: 50%;
						margin-right: 22px;
						flex-shrink: 0;
					}

					.head-info {
						width: 100%;

						.head-img {
							font-size: 12px;
							font-weight: 400;
							color: #999;
						}

						.name-box {
							margin-bottom: 6px;
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.name-left {
								display: flex;
								justify-content: flex-start;

								.name-text {
									font-size: 13px;
									font-weight: 500;
									color: #111;

								}

								.tag-box {
									background: #18b566;
									border-radius: 10px;
									line-height: 15px;
									padding: 2px 5px;
									margin-left: 5px;

									.tag-title {
										font-size: 9px;
										font-weight: 500;
										color: #fff;
										line-height: 10px;
										padding: 2px 4px;
									}
								}
							}
							.name-id {
								color: #999;
								font-size: 12px;
							}
						}
					}
				}
			}
		}

		.end-btn {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 10px 0;
		}
	}
</style>
